<template>
  <open-modal class="c-pz100" :openModal="isShow" @closeModal="closeSpec">
    <div class="renewal-modal c-pt20 c-p" v-if="specList.length">
      <div class="c-pa c-p-r0 c-p-t0 c-pv20 c-ph20 iconfont c-fs28 c-fc-gray" @click="closeSpec">&#xeca0;</div>
      <div class="c-flex-row c-pl16 c-pr16">
        <div class="c-ww144 c-hh144 c-br20 c-text-hidden c-mr28"><img :src="$addXossFilter(coverImg)" class="c-w100 c-h" /></div>
        <div class="c-flex-column c-justify-end">
          <div class="theme-fc c-fw600 c-fs40">
            <span class="c-fs24">{{'￥' | iosPriceFilter}}</span>{{ specList[specIndex].price }}
          </div>
          <div class="c-fc-sblack c-fs22 c-mt10">规格：{{ specList[specIndex].tit }}</div>
          <div class="c-flex-row c-aligni-center c-flexw-wrap c-fs22 c-mt10 c-fc-sblack">
            <span v-if="disPriceInfo">{{disPriceInfo.tit}}:{{'￥' | iosPriceFilter}}{{disPriceInfo.price}}</span>
            <span v-if="disPriceInfo && specList[specIndex].deductiblePoints && Number(specList[specIndex].deductiblePoints) > 0" class="c-ph4">;</span>
            <span v-if="specList[specIndex].deductiblePoints && Number(specList[specIndex].deductiblePoints) > 0">
              {{companyAuth.integrateName1}}可抵 {{'￥' | iosPriceFilter}}{{specList[specIndex].deductiblePoints}}
            </span>
          </div>
        </div>
      </div>
      <div class="c-bg-white c-br20 c-mt16 c-ml16 c-mr16 c-hh410">
        <div class="c-fs22 c-fc-xblack c-pl20 c-pt20 c-pb20">规格</div>
        <ul class="c-liststyle-none c-flex-row c-flexw-wrap time-list">
          <li @click="choosedSpec(index)" v-for="(item, index) in specList" :key="index" :class="specIndex == index ? 'theme-bg-10 theme-fc ':'c-bg-sgray c-fc-xblack'">{{ item.tit }}</li>
        </ul>
      </div>
      <div class="c-bg-white c-ph24 c-mt20 c-pv8">
        <div @click="confirmSpec" class="c-hh72 c-w100 c-br50 theme-bg c-fc-white c-flex-row c-justify-center c-aligni-center c-fs28 c-fw600">确认</div>
      </div>
    </div>
  </open-modal>
</template>
<script>
import { utilJs } from '@/utils/common.js';
import OpenModal from '@/components/templates/common/openModal.vue';
export default {
  name: 'spec',
  components: {
    OpenModal
  },
  props: {
    prodPrice: {
      type: Number,
      default: 0
    },
  },
  watch: {},
  data() {
    return {
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      isShow: false,
      specIndex: 0,
      specList: [],
      coverImg: '',
      circleId: 0,
      dataItem: {},
      disPriceInfo: null,
    };
  },
  created() { },
  mounted() { },
  methods: {
    //选择规则
    _getRenewSetting() {
      utilJs.getMethod(`${global.apiurl}circle/getRenewSetting/${this.circleId}`, res => {
        res.validityPeriod.forEach(item => {
          item.tit = this._getDataTypeMap(item.dateType, item.dateVal);
        });
        this._info = res;
        this.specList = res.validityPeriod || [];
        this.isShow = true;
        this.disPriceInfo = this._getVipDisPriceInfo(this.specList[this.specIndex]);
      });
    },
    //获取对应的天数 1=天；2=月；3=年；4=永久
    _getDataTypeMap(type, numer) {
      let text = '';
      switch (type) {
        case 1:
          text = `${numer}天`;
          break;
        case 2:
          text = `${numer}月`;
          break;
        case 3:
          text = `${numer}年`;
          break;
        case 4:
          text = '永久';
          break;
        default:
          text = '';
      }
      return text;
    },
    _getVipDisPriceInfo(data) {
      let disPriceInfo = null;
      if (this._info.vipType == 2) {
        //vip价格
        if (Number(data.vipDiscount) < 100) {
          let discountPrice = (data.price * Number(data.vipDiscount) / 100).toFixed(2);
          disPriceInfo = {
            tit: "vip价格",
            price: discountPrice < 0.01 ? 0 : discountPrice
          }
        }
      } else if (this._info.vipType == 4) {
        //svip价格
        if (Number(data.vipDiscount) < 100) {
          let discountPrice = (data.price * Number(data.svipDiscount) / 100).toFixed(2)
          disPriceInfo = {
            tit: "svip价格",
            price: discountPrice < 0.01 ? 0 : discountPrice
          }
        }
      }
      console.log("disPriceInfo", disPriceInfo);
      return disPriceInfo;
    },
    open(data, item) {
      this.coverImg = data.coverImg;
      this.circleId = data.circleId;
      this.dataItem = item;
      this._getRenewSetting();
    },
    close() {
      this.isClose = false;
    },
    confirmSpec() {
      let currItem = this.specList[this.specIndex];
      this.isShow = false;
      this.$emit('chooseSpec', currItem, this.dataItem);
    },
    choosedSpec(index) {
      this.specIndex = index;
      this.disPriceInfo = this._getVipDisPriceInfo(this.specList[this.specIndex]);
    },
    closeSpec() {
      this.isShow = false;
    }
  }
};
</script>
<style scoped lang="scss">
.renewal-modal {
  border-radius: 0.5rem 0.5rem 0 0;
  background: #f5f7fa;
}

.time-list {
  padding: 0 0.5rem;
  li {
    font-size: 0.6rem;
    font-weight: 600;
    min-width: 3rem;
    padding: 0 0.625rem;
    height: 1.45rem;
    line-height: 1.45rem;
    text-align: center;
    margin: 0 0.5rem 0.5rem 0;
    border-radius: 0.75rem;
    &.active {
    }
  }
}
</style>
